<template>
    <ListView />
    <Recommend />
    <CommodityList />
    <Guess />
    <Floors v-for="item in FloorListData" :key="item.id" :FloorData="item" />
    <Trademark />
</template>

<script lang='ts'>

import request from '@/API/entry'
import { ElMessage } from 'element-plus'
import type TypeSum from '@/TypeSum/entry'
import { reactive, defineComponent, defineAsyncComponent, provide, toRef, onMounted, toRefs, markRaw, toRaw } from 'vue'

const Recommend = defineAsyncComponent(() => import('../Recommend/Recommend.vue'))
const Guess = defineAsyncComponent(() => import('../Guess/Guess.vue'))
const CommodityList = defineAsyncComponent(() => import('../CommodityList/CommodityList.vue'))
const Floors = defineAsyncComponent(() => import('../Floors/Floors.vue'))
const Trademark = defineAsyncComponent(() => import('../Trademark/Trademark.vue'))

type ajaxData = TypeSum['Home']['AxiosData']

export default defineComponent({
    name: 'Home',
    components: {
        Recommend, Guess, CommodityList, Floors, Trademark
    },
    setup() {
        //datas zone
        const Datas = reactive<TypeSum['Home']['sumData']>({
            BannerListData: [],
            FloorListData: []
        })
        //functions zone
        async function getMockBannerListData() {
            try {
                const result: ajaxData = await request.mockRequest.ListImg()
                if (result.code == 200) {
                    Datas.BannerListData = result.data
                } else {
                    ElMessage.warning('网路出问题了')
                }
            } catch {
                ElMessage.error('数据请求失败')
            }
        }
        async function getMockFloorListData() {
            try {
                const result = await request.mockRequest.floorData() as { code?: number, data: any }
                if (result.code == 200) {
                    Datas.FloorListData = markRaw(result.data)
                } else {
                    ElMessage.warning('网路出问题了')
                }
            } catch (error) {
                ElMessage.error('网路出问题了' + error)
            }
        }
        //hooks zone
        onMounted(() => {
            getMockBannerListData()
            getMockFloorListData()
        })
        //Bus zone
        provide('BannerListData', toRef(Datas, 'BannerListData'))

        return {
            ...toRefs(Datas)
        }
    },
})
</script>
<style scoped lang="less">
</style>